<template>
  <div class="image-grid">
    <div class="grid-container">
      <div
        v-for="(image, index) in images"
        :key="image.url"
        class="image-item"
        :class="{ 'deleting': index === deletingIndex }"
        :style="{ 
          'transition': 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
          'transform-origin': 'center'
        }"
      >
        <div
          class="image-wrapper"
          @click="handleImageClick(image, index)"
          @mousedown="startLongPress(index)"
          @mouseup="cancelLongPress"
          @mouseleave="cancelLongPress"
        >
          <img 
            :src="image.url" 
            :alt="image.name" 
            loading="lazy"
          >
        </div>
      </div>
    </div>

    <!-- 删除确认对话框 -->
    <Transition name="fade">
      <div v-if="showDeleteModal" class="delete-modal">
        <div class="delete-modal-content">
          <p>确定要删除这张图片吗？</p>
          <div class="delete-modal-buttons">
            <button class="delete-modal-button confirm" @click="confirmDelete">确定</button>
            <button class="delete-modal-button cancel" @click="cancelDelete">取消</button>
          </div>
        </div>
      </div>
    </Transition>

    <ImagePreview
      :show="showPreview"
      :images="images"
      :current-index="previewImageIndex"
      @close="showPreview = false"
      @change-index="handleChangeIndex"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TrashIcon } from '@heroicons/vue/24/outline'
import ImagePreview from './ImagePreview.vue'

const props = defineProps({
  images: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(['delete-image', 'image-click'])
const showPreview = ref(false)
const previewImageIndex = ref(null)
const deletingIndex = ref(null)
const longPressTimer = ref(null) // 长按计时器
const showDeleteModal = ref(false) // 是否显示删除确认对话框
const pendingDeleteIndex = ref(null) // 待删除的图片索引

// 开始长按
const startLongPress = (index) => {
  longPressTimer.value = setTimeout(() => {
    showDeleteModal.value = true
    pendingDeleteIndex.value = index
  }, 1000) // 1秒后触发长按
}

// 取消长按
const cancelLongPress = () => {
  if (longPressTimer.value) {
    clearTimeout(longPressTimer.value)
    longPressTimer.value = null
  }
}

// 确认删除
const confirmDelete = () => {
  if (pendingDeleteIndex.value !== null) {
    handleDelete(pendingDeleteIndex.value)
  }
  showDeleteModal.value = false
  pendingDeleteIndex.value = null
}

// 取消删除
const cancelDelete = () => {
  showDeleteModal.value = false
  pendingDeleteIndex.value = null
}

const handleDelete = (index) => {
  deletingIndex.value = index
  const image = props.images[index];
  const filename = image.name || image.url.split('/').pop(); // 从 url 中提取文件名
  deleteImage(filename, index);
}

const deleteImage = async (filename, index) => {
  try {
    const response = await fetch('https://otzqzfxjpcst.sealoshzh.site/api/images/del', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ filename: filename }), // 发送包含 filename 的请求体
    });

    // 检查响应状态
    if (!response.ok) {
      const errorText = await response.text(); // 获取错误文本
      console.error('删除图片失败:', errorText);
      return;
    }

    const result = await response.json();
    if (result.code === 200) {
      emit('delete-image', index); // 从父组件中删除图片
    } else {
      console.error(result.message);
    }
  } catch (error) {
    console.error('删除图片失败:', error);
  }
}

const handleImageClick = (image, index) => {
  emit('image-click', image, index); // 触发父组件的 image-click 事件
}
</script>

<style scoped>
.image-grid {
  margin-top: 20px;
  width: 100%;
}

.grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0;
  max-width: 1800px;
  margin: 0 auto;
  position: relative;
}

.image-item {
  position: relative;
  width: calc(25% - 15px);
  height: calc((100vw - 80px) / 4 * 0.45);
  max-height: 280px;
  min-height: 180px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--surface-color);
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.image-wrapper:hover img {
  transform: scale(1.05);
}

/* 删除确认对话框样式 */
.delete-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.delete-modal-content {
  background: var(--background-color);
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-width: 90%;
  width: 300px;
}

.delete-modal-content p {
  margin: 0 0 20px;
  font-size: 16px;
  color: var(--text-primary);
}

.delete-modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.delete-modal-button {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.delete-modal-button.confirm {
  background: var(--primary-color);
  color: white;
}

.delete-modal-button.confirm:hover {
  background: var(--secondary-color);
}

.delete-modal-button.cancel {
  background: var(--surface-color);
  color: var(--text-primary);
}

.delete-modal-button.cancel:hover {
  background: var(--border-color);
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 动画相关样式 */
.image-list-enter-active {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-list-leave-active {
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  width: calc(25% - 15px); /* 保持原有宽度 */
  height: calc((100vw - 80px) / 4 * 0.45); /* 保持原有高度 */
}

.image-list-enter-from {
  opacity: 0;
  transform: scale(0.9) translateY(20px);
}

.image-list-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

/* 响应式布局调整 */
/* 大屏平板（如 iPad Pro） */
@media (max-width: 1200px) {
  .grid-container {
    gap: 16px;
    padding: 0;
  }

  .image-item {
    width: calc(33.333% - 11px); /* 3列显示 */
    height: calc((100vw - 72px) / 3 * 0.45);
    max-height: 260px;
    min-height: 160px;
  }

  .image-list-leave-active {
    width: calc(33.333% - 11px);
    height: calc((100vw - 72px) / 3 * 0.45);
  }
}

/* 中等屏幕平板（如标准 iPad） */
@media (max-width: 900px) {
  .grid-container {
    gap: 15px;
  }

  .image-item {
    width: calc(33.333% - 10px); /* 保持3列显示 */
    height: calc((100vw - 65px) / 3 * 0.45);
    max-height: 240px;
    min-height: 150px;
  }

  .image-list-leave-active {
    width: calc(33.333% - 10px);
    height: calc((100vw - 65px) / 3 * 0.45);
  }
}

/* 手机和小屏平板竖屏 */
@media (max-width: 768px) {
  .grid-container {
    gap: 12px;
  }

  .image-item {
    width: calc(50% - 6px); /* 2列显示 */
    height: calc((100vw - 44px) / 2 * 0.45);
    max-height: 220px;
    min-height: 140px;
  }

  .image-list-leave-active {
    width: calc(50% - 6px);
    height: calc((100vw - 44px) / 2 * 0.45);
  }
}

/* 小屏手机 */
@media (max-width: 480px) {
  .image-item {
    width: 100%; /* 1列显示 */
    height: calc((100vw - 40px) * 0.4);
    max-height: 300px;
    min-height: 180px;
  }

  .image-list-leave-active {
    width: 100%;
    height: calc((100vw - 40px) * 0.4);
  }
}

/* 处理横屏模式 */
@media (orientation: landscape) and (max-width: 1200px) {
  .grid-container {
    gap: 12px; /* 缩小间距 */
    padding: 0 20px; /* 添加左右内边距 */
    justify-content: flex-start; /* 左对齐 */
  }

  .image-item {
    width: calc((100% - 60px) / 6); /* 根据可用空间自动调整每张图片的宽度 */
    height: calc((100vw - 100px) / 6 * 0.45); /* 根据宽度计算高度,保持宽高比 */
    max-height: 200px;
    min-height: 120px;
  }

  .image-list-leave-active {
    width: calc((100% - 60px) / 6);
    height: calc((100vw - 100px) / 6 * 0.45);
  }
}

/* 中等屏幕平板横屏 */
@media (orientation: landscape) and (max-width: 900px) {
  .grid-container {
    gap: 10px; /* 缩小间距 */
  }

  .image-item {
    width: calc(25% - 8px); /* 横屏时保持4列 */
    height: calc((100vw - 52px) / 4 * 0.45); /* 根据4列调整高度 */
    max-height: 200px;
    min-height: 120px;
  }

  .image-list-leave-active {
    width: calc(25% - 8px);
    height: calc((100vw - 52px) / 4 * 0.45);
  }
}

/* 小屏平板横屏 */
@media (orientation: landscape) and (max-width: 768px) {
  .grid-container {
    gap: 8px; /* 缩小间距 */
  }

  .image-item {
    width: calc(33.333% - 6px); /* 横屏时保持3列 */
    height: calc((100vw - 40px) / 3 * 0.45); /* 根据3列调整高度 */
    max-height: 180px;
    min-height: 100px;
  }

  .image-list-leave-active {
    width: calc(33.333% - 6px);
    height: calc((100vw - 40px) / 3 * 0.45);
  }
}

/* 优化滚动条样式 */
.image-grid::-webkit-scrollbar {
  width: 8px;
}

.image-grid::-webkit-scrollbar-track {
  background: var(--surface-color);
  border-radius: 4px;
}

.image-grid::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 4px;
}

.image-grid::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-color);
}

/* 添加删除状态的样式 */
.image-item.deleting {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  position: relative;
  z-index: -1;
}
</style> 